<template>
	<view class="multiInput">
		<view class="with-fun">
			<input :focus="focus_" :type="inputType" :value="value" @input="onInput" class="uni-input" 
			 :placeholder="placeholder" :placeholder-style="placeholderStyle" :maxlength="maxlength"
			 :password="type==='password'&&!showPassword" @focus="onFocus" @blur="onBlur" />
			<!-- 优先显示密码可见按钮 -->
			<view class="uni-icon uni-icon-close" :style="{ color: iconColor }" v-if="clearable_&&!displayable_&&value.length" @click="clear"></view>
			<view class="uni-icon uni-icon-eye" :style="{ color: iconColor }" :class="[showPassword?'':'notSee']" v-if="displayable_" @click="display"></view>
		</view>
	</view>
</template>

<script>

	export default {
		props: {
			/**
			 * 输入类型
			 */
			type:  {
				type: [String],
				default: 'text'
			},
			/**
			 * 值
			 */
			value: String,
			/**
			 * 最大长度
			 */
			maxlength: {
				type: [String],
				default: '140'
			},
			/**
			 * 占位符
			 */
			placeholder: {
				type: [String],
				default: '请输入'
			},
			/**
			 * 占位符字体颜色
			 */
			placeholderStyle: {
				type: [String],
				default: 'color: 000;'
			},
			/**
			 * 是否显示清除按钮
			 */
			clearable: {
				type: [Boolean, String],
				default: false
			},
			/**
			 * 是否显示密码可见按钮
			 */
			displayPassword: {
				type: [Boolean, String],
				default: false
			},
			/**
			 * 自动获取焦点
			 */
			focus: {
				type: [Boolean, String],
				default: false
			},
			/**
			 * 文本框内图标颜色
			 */
			iconColor: {
				type: [String],
				default: '#666666'
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				/**
				 * 显示密码明文
				 */
				showPassword: false,
				/**
				 * 是否获取焦点
				 */
				isFocus: false
			}
		},
		computed: {
			inputType() {
				const type = this.type
				return type === 'password' ? 'text' : type
			},
			clearable_() {
				return String(this.clearable) !== 'false'
			},
			displayable_() {
				return String(this.displayPassword) !== 'false'
			},
			focus_() {
				return String(this.focus) !== 'false'
			}
		},
		methods: {
			clear() {
				this.$emit('input', '')
			},
			display() {
				this.showPassword = !this.showPassword
			},
			onFocus() {
				this.isFocus = true
			},
			onBlur() {
				this.$nextTick(() => {
					this.isFocus = false
				})
			},
			onInput(e) {
				this.$emit('input', e.target.value)
			}
		}
	}
</script>

<style lang="scss">
	.multiInput{
		width: 100%;
		.with-fun {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: nowrap;
			-ms-flex-wrap: nowrap;
			flex-wrap: nowrap;
			align-items: center;
			.uni-input{background: none;}
			.notSee{opacity: 0.4;}
		}
	}
</style>
